<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>错误 - 脑电管理系统</title>
    <style>
        /* --- 基础样式重置和变量 --- */
        :root {
            --primary-color: #66b1ff;
            --text-color: #333;
            --light-gray: #f8f9fa;
            --border-color: #dee2e6;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            margin: 0;
            background-color: var(--light-gray);
            color: var(--text-color);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            text-align: center;
        }

        /* --- 容器样式 --- */
        .error-container {
            background: #fff;
            padding: 2rem 3rem;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
            max-width: 600px;
            width: 90%;
        }

        /* --- 内容元素样式 --- */
        .error-code {
            font-size: 8rem;
            font-weight: bold;
            color: var(--primary-color);
            margin: 0;
            line-height: 1;
        }

        .error-title {
            font-size: 2rem;
            margin: 1rem 0;
        }

        .error-description {
            font-size: 1.1rem;
            color: #666;
            margin-bottom: 2rem;
        }

        /* --- 按钮和链接样式 --- */
        .actions {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
        }

        .btn {
            display: inline-block;
            padding: 0.8rem 1.5rem;
            border-radius: 5px;
            text-decoration: none;
            font-weight: 500;
            transition: background-color 0.2s, transform 0.2s;
        }

        .btn-primary {
            background-color: var(--primary-color);
            color: #fff;
        }

        .btn-primary:hover {
            background-color: #66b1ff;
            transform: translateY(-2px);
        }

        .btn-secondary {
            background-color: #e9ecef;
            color: var(--text-color);
        }

        .btn-secondary:hover {
            background-color: var(--border-color);
            transform: translateY(-2px);
        }

        /* --- 响应式设计 --- */
        @media (max-width: 600px) {
            .error-container {
                padding: 1.5rem;
            }
            .error-code {
                font-size: 6rem;
            }
            .error-title {
                font-size: 1.5rem;
            }
            .actions {
                flex-direction: column;
                align-items: center;
            }
            .btn {
                width: 100%;
                max-width: 250px;
            }
        }
    </style>
</head>
<body>
<main class="error-container">
    <!-- 使用 Thymeleaf 表达式动态获取错误状态码 -->
    <h1 class="error-code" th:text="${statusCode}">404</h1>

    <!-- 根据状态码显示不同的标题和描述 -->
    <div th:switch="${statusCode}">
        <div th:case="404">
            <h2 class="error-title">哎呀，页面走丢了！</h2>
            <p class="error-description">我们找不到你想要访问的页面...</p>
        </div>
        <div th:case="500">
            <h2 class="error-title">服务器出了点小问题</h2>
            <p class="error-description">我们的服务器遇到了一个意外错误，我们已经收到了通知。</p>
        </div>
        <!-- 默认情况 -->
        <div th:case="*">
            <h2 class="error-title">发生了一个未知错误</h2>
            <p class="error-description">请稍后再试，或联系我们的管理员。</p>
        </div>
    </div>

    <!-- 行动指引通常不变 -->
<!--    <div class="actions">-->
<!--        <a href="/" class="btn btn-primary">返回首页</a>-->
<!--        <a href="/help" class="btn btn-secondary">访问帮助中心</a>-->
<!--    </div>-->
</main>
</body>
</html>
